<template>
    <div>
        <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:fbm_slot="{data}">
            <div :style="{width:data.widthString}">
                <compSelector
                    :compType="typeSelect"
                    class="comp-select-box-b"
                    @selectHandleChange="fbmChange"
                    dictionaryType="OA申请科室单位"/>
            </div>
        </template>
        <template v-slot:fbmzcjjfl_slot="{data}">
            <div :style="{width:data.widthString}">
                <a-cascader ref="cascaderBmzcjjfl" :display-render="displayRender" :options="bmJjflList" placeholder="请选择" @change="fbmzcjjflChange" />
            </div>
        </template>
        <template v-slot:operation_fzcjd="{row}" data-desc="自定操作栏">
            <span>{{ fzcjdNum(row.fzcjd) }}</span>
        </template>
        </commpVxeTable>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import { deleteData,deleteBatch, } from './service/index.js'
export default {
  components: {
    commpVxeTable,
  },
  props:{
    isDepart: {
        type:String,
        default: null,
        required:false,
    }
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: this.isDepart?assessCheckApi.list:assessCheckApi.lists,
        rowId: 'id',
        urlType: true,
        paramet:{
        }
      },
      formItem: [
        {
            label: '操作部门',
            model: 'fbm',
        },{
          label: '预算项目名称',
          model: 'fysxmmc',
        },{
          label: '经济分类',
          model: 'fbmjjflmc',
        },{
            label: '指标摘要',
            model: 'fzbzy',
        },{
            label: '总指标',
            model: 'fzzb',
        },{
            label: '年度',
            model: 'fnd',
        },
      ],
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '部门',
          field: 'fbm',
          width: 200,
        },{
          title: '预算项目名称',
          field: 'fysxmmc',
        },{
          title: '经济分类',
          field: 'fbmjjflmc',
        },{
          title: '预算指标状态',
          field: 'fyszbzt',
          width: 150,
        },{
          title: '已支付金额',
          field: 'fyzfje',
          width: 100,
        },{
          title: '指标摘要',
          field: 'fzbzy',
        },{
          title: '总指标',
          field: 'fzzb',
          width: 100,
        },{
          title: '指标结余',
          field: 'fzbjy',
          width: 100,
        },{
          title: '支出进度',
          field: 'fzcjd',
          width: 100,
          slots: {
            default: 'operation_fzcjd',
          },
        },
        // {
        //   title: '操作',
        //   field: 'id',
        //   width: 160,
        //   fixed: 'right',
        //   slots: {
        //   // 使用插槽模板渲染
        //     default: 'operation_btn',
        //   },
        // }
      ],
      idList: [],
      passObj: {},
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    fzcjdNum(num){
        if(num){
            var number = Number(num * 100).toFixed(2) + '%'//保留两位小数
            return number
        }
    },
    cancel(){},
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.searchEvent()
      this.idList = []
    },
  },
}
</script>
